<script lang="ts" setup>
import type { RankedInfoFormat } from '@/types/ranked'
import RankedDisplay from '@/components/rankedDisplay.vue'
import { getRankInfo } from '@/LcuApi/rankInfo'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n';

const { t } = useI18n()

const isLoad = ref(false)
// 获取指定召唤师的段位信息
const rankData = ref<RankedInfoFormat>({})
const rankedSoloDesc = ref([])
const rankedFlexDesc = ref([])

rankedSoloDesc.value = formatDescData('solo')
rankedFlexDesc.value = formatDescData('flex')
async function getRankedStats(puuid) {
  rankData.value = await getRankInfo(puuid)
  rankedSoloDesc.value = formatDescData('solo')
  rankedFlexDesc.value = formatDescData('flex')
  isLoad.value = true
}

function formatDescData(key) {
  const row = rankData?.value?.[key]
  if (!row) return []
  return [
    { label: t(`RankedTable.tier`), value: row.text },
    { label: t(`RankedTable.leaguePoints`), value: `${row.lp} ${t('RankedTable.LP')}` },
    { label: t(`RankedTable.cumWins`), value: row.wins },
    { label: t(`RankedTable.highestTier`), value: row.highestText },
  ]
}

defineExpose({ getRankedStats })
</script>

<template>
  <a-popover position="bottom">
    <div class="rank_info flex items-center">
      <div class="rank_show">
        <div class="w-20px h-20px">
          <RankedDisplay :tier="rankData?.solo?.tier" size="small" />
        </div>
        <div class="text-12px text-gray-500">{{ rankData?.solo?.abbrText }}</div>
      </div>
      <div class="w-2px h-13px mx-4px bg-#000 opacity-20 rounded-10px"></div>
      <div class="rank_show">
        <div class="w-20px h-20px">
          <RankedDisplay :tier="rankData?.flex?.tier" size="small" />
        </div>
        <div class="text-12px text-gray-500">{{ rankData?.flex?.abbrText }}</div>
      </div>
    </div>
    <template #content>
      <div class="ranked_desc w-400px">
        <a-descriptions :column="2" size="mini" :data="rankedSoloDesc" :title="t(`RankedTable.solo`)" bordered />
        <a-descriptions :column="2" size="mini" :data="rankedFlexDesc" :title="t(`RankedTable.flex`)" bordered />
      </div>
    </template>
  </a-popover>
</template>

<style lang="scss" scoped>
.rank_info {
  .rank_show {
    display: flex;
    align-items: center;

    &+.rank_show {
      margin-left: 6px;
    }
  }
}

.ranked_desc {
  ::v-deep(.arco-descriptions) {
    margin-bottom: 8px;

    .arco-descriptions-title {
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
